#@adminLayout()

#define css()
<style>
  .users-list>li img {
    border-radius: 50%;
    max-width: 100%;
    height: 100px;
}
</style>
#end

#define adminMain()
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      仪表盘
      <small>控制面板</small>
    </h1>
    <ol class="breadcrumb">
      <li><a href="/admin"><i class="fa fa-dashboard"></i> 主页</a></li>
      <li class="active">仪表板</li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content">
    <!-- Small boxes (Stat box) -->
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>#(postNum)</h3>

            <p>总发布文章数</p>
          </div>
          <div class="icon">
            <i class="ion ion-document-text"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
          <div class="inner">
            <h3>#(commentNum)</h3>

            <p>总评论数</p>
          </div>
          <div class="icon">
            <i class="ion ion-chatbox"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
          <div class="inner">
            <h3>#(userNum)</h3>

            <p>用户注册</p>
          </div>
          <div class="icon">
            <i class="ion ion-person-add"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
      <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
          <div class="inner">
            <h3>#(tagNum)</h3>

            <p>标签数</p>
          </div>
          <div class="icon">
            <i class="fa  fa-tags"></i>
          </div>
          <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
      </div>
      <!-- ./col -->
    </div>
    <!-- /.row -->
    <!-- Main row -->
    <div class="row">
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-aqua"><i class="ion ion-compose"></i></span>

          <div class="info-box-content">
            <span class="info-box-text">文章发布数</span>
            <span class="info-box-number">#(sk.formatNum(articleNum))</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-red"><i class="ion ion-social-youtube"></i></span>

          <div class="info-box-content">
            <span class="info-box-text">视频发布数</span>
            <span class="info-box-number">#(sk.formatNum(videoNum))</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->

      <!-- fix for small devices only -->
      <div class="clearfix visible-sm-block"></div>

      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-green"><i class="ion ion-images"></i></span>

          <div class="info-box-content">
            <span class="info-box-text">图片发布数</span>
            <span class="info-box-number">#(sk.formatNum(imageNum))</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
      <div class="col-md-3 col-sm-6 col-xs-12">
        <div class="info-box">
          <span class="info-box-icon bg-yellow"><i class="ion ion-ios-help-outline"></i></span>

          <div class="info-box-content">
            <span class="info-box-text">问答数</span>
            <span class="info-box-number">#(sk.formatNum(questionNum))</span>
          </div>
          <!-- /.info-box-content -->
        </div>
        <!-- /.info-box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row (main row) -->
    <div class="row">
      <div class="col-md-6">
          <!-- USERS LIST -->
            <div class="box box-danger">
              <div class="box-header with-border">
                <h3 class="box-title">最新加入</h3>

                <div class="box-tools pull-right">
                  <span class="label label-danger">#(users.size()) 位新成员</span>
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                  </button>
                </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body no-padding">
                <ul class="users-list clearfix">
                  #for(user : users)
                  <li>
                    <img src="#(user.avatar)" alt="User Image">
                    <a class="users-list-name" href="/user/#(user.id)">#(user.nickName)</a>
                    <span class="users-list-date">#(timeKit.format(user.createAt))</span>
                  </li>
                  #end
                                
                </ul>
                <!-- /.users-list -->
              </div>
              <!-- /.box-body -->
              <div class="box-footer text-center">
                <a href="javascript:void(0)" class="uppercase">查看所有用户</a>
              </div>
              <!-- /.box-footer -->
            </div>
      </div>
      <!--最新发布-->
      <div class="col-md-6">
          <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">最新新增文章</h3>

            <div class="box-tools pull-right">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
              </button>
              <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <ul class="products-list product-list-in-box">
              #for(post : posts)
              <li class="item">
                <div class="product-img">
                  #if(post.lastImages)
                  <img src="#(post.lastImages)" alt="post Image">
                  #else
                  <img src="/assets/images/MB.png" alt="post Image">
                  #end
                </div>
                <div class="product-info">
                  <a href="javascript:void(0)" class="product-title">#(post.title)
                    <span class="label label-warning pull-right">
                    <i class="ion ion-eye"></i> #(post.views)
                    </span>
                  </a>
                  <span class="product-description">
                    #(post.summary)
                  </span>
                </div>
              </li>
              #end
              <!-- /.item -->
            </ul>
          </div>
          <!-- /.box-body -->
          <div class="box-footer text-center">
            <a href="javascript:void(0)" class="uppercase">查看所有文章</a>
          </div>
          <!-- /.box-footer -->
        </div>
      </div>
    </div>

  </section>
  <!-- /.content -->

#end

